var channel = getQueryString("channel");
var category = null;
var page = 1;
$(function () {
    getCatConfig();
    $(".back-wrapper").click(function () {
        location.href = "../index.html?channel="+channel;
    });
    var cat = -1, status = -1, fee = -1;
    getBook(channel,cat,status,fee);
    $(".channel-type").on("click","li",function () {
        $(this).addClass("active").siblings("li").removeClass("active");
        channel = $(this).attr("data-k");
        DrawCat(category[channel]);
        cat = -1;
        page = 1;
        $(".nor-more").hide();
        $(".list-content ul li").remove();
        getBook(channel,cat,status,fee);
    });

    $(".cat-type").on("click","li",function () {
        $(this).addClass("active").siblings("li").removeClass("active");
        cat = $(this).attr("data-k");
        page = 1;
        $(".nor-more").hide();
        $(".list-content ul li").remove();
        getBook(channel,cat,status,fee);
    });

    $(".status-type").on("click","li",function () {
        $(this).addClass("active").siblings("li").removeClass("active");
        status = $(this).attr("data-k");
        page = 1;
        $(".nor-more").hide();
        $(".list-content ul li").remove();
        getBook(channel,cat,status,fee);
    });

    $(".fee-type").on("click","li",function () {
        $(this).addClass("active").siblings("li").removeClass("active");
        fee = $(this).attr("data-k");
        page = 1;
        $(".nor-more").hide();
        $(".list-content ul li").remove();
        getBook(channel,cat,status,fee);
    });

    $(".back-top-wrapper").click(function () {
        window.scrollTo(0,0);//移动到顶部
    });
    scrollEvent(channel,cat,status,fee);
});

function getCatConfig() {
    $.ajax({
        type:'get',
        url:BASE_URl + "config/category",
        success:function (data) {
            if(data.success){
                DrawConfig(data.data);
            }
        }
    });
}

function DrawConfig(data) {
    category = data.category;
    var channels = data.channels;
    var status = data.status;
    var fees = data.types;

    // 频道
    var channelHtml = "";
    for(var i = 1;i < channels.length;i ++){
        if(channels[i].k == channel){
            channelHtml += `<li class="inline active" data-k="${channels[i].k}">${channels[i].v}</li>`;
        }else{
            channelHtml += `<li class="inline" data-k="${channels[i].k}">${channels[i].v}</li>`;
        }
    }
    $(".channel-type").html(channelHtml);

    // 分类
    DrawCat(category[channel]);

    // 状态
    var statusHtml = "";
    for(var i = 0;i < status.length;i ++){
        if(status[i].k == -1){
            statusHtml += `<li class="inline active" data-k="${status[i].k}">${status[i].v}</li>`;
        }else{
            statusHtml += `<li class="inline" data-k="${status[i].k}">${status[i].v}</li>`;
        }
    }
    $(".status-type").html(statusHtml);

    // 收费类型
    var feeHtml = "";
    for(var i = 0;i < fees.length;i ++){
        if(fees[i].k == -1){
            feeHtml += `<li class="inline active" data-k="${fees[i].k}">${fees[i].v}</li>`;
        }else{
            feeHtml += `<li class="inline" data-k="${fees[i].k}">${fees[i].v}</li>`;
        }
    }
    $(".fee-type").html(feeHtml);
}

function DrawCat(cat) {
    var feesHtml = "";
    for(var i = 0;i < cat.length;i ++){
        if(cat[i].k == -1){
            feesHtml += `<li class="inline active" data-k="${cat[i].k}">${cat[i].v}</li>`;
        }else{
            feesHtml += `<li class="inline" data-k="${cat[i].k}">${cat[i].v}</li>`;
        }
    }
    $(".cat-type").html(feesHtml);
}

function getBook(channel,cat,status,fee) {
    $.ajax({
        type:'get',
        url:BASE_URl + "search/filter?channel="+channel+"&cat="+cat+"&status="+status+"&fee="+fee+"&page="+page+"&format=full",
        success:function (data) {
            if(data.success){
                $(".load-wrapper").hide();
                page ++;
                DrawBook(data.data);
            }
        }
    });
}

function DrawBook(data) {
    if(data){
        var html = "";
        for (var i = 0;i < data.length;i ++){
            var statusHtml = "";
            if(data[i].status == "连载中"){
                statusHtml = `<span class="status updating">[${data[i].status}]：</span>`
            }else if(data[i].status == "已完结"){
                statusHtml = `<span class="status finish">[${data[i].status}]：</span>`
            }
            html += `<li onclick="goDetail('${data[i].id}',${channel})">
                    <div class="book-cover inline"><img src="${data[i].image}" alt="" width="100%" height="100%"></div>
                    <div class="book-detail inline">
                        <div class="book-name">${data[i].name}</div>
                        <div class="book-desc">
                            ` + statusHtml + `${data[i].desc}
                        </div>
                        <div class="cat-and-click clearfix">
                            <div class="cat-wrapper fl">
                                <span class="border-1px-all">${data[i].cat}</span>
                            </div>
                            <div class="click-wrapper fr">
                                <i class="inline click-icon"></i><span class="inline click">${data[i].clicks}</span>
                            </div>
                        </div>
                    </div>
               </li>`;
        }
        $(".list-content ul").append(html);
    }else{
        $(".nor-more").show();
    }

}

function goDetail(id,channel) {
    location.href = "./detail.html?id="+id+"&channel="+channel;
}

function scrollEvent(channel,cat,status,fee) {
    window.onscroll = function(){
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;  //获取滚动的距离
        var totalHeight = $(".classify-wrapper").height();
        var clientHeight = document.body.clientHeight && document.documentElement.clientHeight;
        if(scrollTop > 250){
            $(".back-top-wrapper").css("opacity",1);
        }else{
            $(".back-top-wrapper").css("opacity",0);
        }
        if(scrollTop + clientHeight == totalHeight){
            $(".nor-more").hide();
            $(".load-wrapper").show();
            getBook(channel,cat,status,fee);
        }
    };
}